<template>
	<div style="border:1px solid whitesmoke;
		width: 100%;height: 500px; border-radius: 15px;" 
		id="container">
	</div>
</template>

<script>
	import BMap from 'BMap'
	export default {
		name: 'schoolMap',
		data() {
			return {
				schoolName: '',
				schoolCity: '',
			}
		},
		props: ['schoolId'],  // 从父组件传过来的值
		methods: {
			getSchoolInfo(){
				var param = this.$qs.stringify({
					schoolId: this.schoolId
				});
				// 获取学校的基本信息
				this.$axios.post("/school/showSchoolById", param)
					.then(rst => {
						// console.log(rst.data);
						this.schoolName = rst.data.schoolName;
						this.schoolCity = rst.data.schoolCity;
						// console.log(this.schoolName)
						// console.log(this.schoolCity)
						this.createMap(this.schoolName,this.schoolCity)
					}).catch(ex => {
						console.log(ex);
					});
			},
			createMap(address,city) {
				// 创建Map实例
				var map = new BMap.Map("container")
				// 初始化地图,设置中心点坐标和地图级别
				var point = new BMap.Point(116.404, 39.915);
				map.centerAndZoom(point, 11);
				
				console.log(address);
				// 创建地址解析器实例     
				var myGeo = new BMap.Geocoder();      
				// 将地址解析结果显示在地图上，并调整地图视野    
				myGeo.getPoint(address, function(point){//回调函数      
				    if (point) {      
				        map.centerAndZoom(point, 16);   
						var myIcon = new BMap.Icon(require("../../assets/label.png"), new BMap.Size(100, 100))
						var marker = new BMap.Marker(point, {icon: myIcon});    
						map.addOverlay(marker);  
				    }      
				 }, // 标明所在城市
				city);
				
				//添加地图类型控件
				map.addControl(new BMap.MapTypeControl({
					mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
				}))
				// 设置地图显示的城市 此项是必须设置的
				map.setCurrentCity("北京")
				//开启鼠标滚轮缩放
				map.enableScrollWheelZoom(true)
				
			},
			 
		},
		mounted() {
			
		},
		created() {
			this.getSchoolInfo();
		}
	}
</script>
<style scope>
	#map {
		min-height: 100vh;
	
	}
</style>
